<template>
    <el-main class="main">
        <el-row justify="center">
            <el-col :span="12">
                <div class="search-box">
                    <el-input v-model="searchValue" placeholder="请输入" class="search-input">
                        <template #prefix>
                            <el-icon :size="25">
                                <SearchLogo />
                            </el-icon>
                        </template>
                    </el-input>
                    <el-button type="primary" :icon="Search" class="search-button">搜索</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row justify="center" @mouseenter="isOpen = true" @mouseleave="isOpen = false">
            <el-col :span="20">
                <div class="categoryBar-box">
                    <div class="categoryBar">
                        <div class="arrowDown" v-if="!isOpen">
                            <el-icon :size="10">
                                <ArrowDownBold />
                            </el-icon>
                        </div>
                        <ul>
                            <li v-for="item in categoryItems" :key="item.id" class="categoryItem">
                                {{ item.name }}
                            </li>
                        </ul>
                        <div class="arrowUp" v-if="isOpen">
                            <el-icon :size="10">
                                <ArrowUpBold />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row justify="center">
            <el-col :span="20">
                <el-row :gutter="100">
                    <el-col :span="16">
                        <div class="blog-box" v-infinite-scroll="load">
                            <BlogItem v-for="item in blogItems" :key="item.id" :blogItem="item"
                                @click="router.push(`blog/details/${item.id}`)">
                            </BlogItem>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-affix :offset="fixHeight" :index="9999">
                            <div class="right-card-box" ref="rightCard">
                                <el-card class="decoration-box side-card" :body-style="{ padding: '0px' }">
                                    <div class="decoration-img-box">
                                        <img v-if="dailyRecommendation.imgURL !== ''" :src="dailyRecommendation.imgURL"
                                            :alt="dailyRecommendation.title" class="decoration-img" />
                                    </div>
                                    <div class="decoration">
                                        <h3>今日番剧推荐</h3>
                                        <div class="decoration-header">
                                            <span>{{ dailyRecommendation.title }}</span>
                                            <el-button size="small" type="primary" class="viewBtn"
                                                @click="handleOPEN">去追番休息~</el-button>
                                        </div>
                                        <div class="decoration-content">{{ dailyRecommendation.content }}</div>
                                    </div>
                                </el-card>
                                <el-card class="recommended-author-box side-card" shadow="never">
                                    <template #header>
                                        <div class="card-header">
                                            作者推荐
                                        </div>
                                    </template>
                                    <div v-for="item in recommendedAuthors" :key="item.id" class="recommended-author"
                                        @click="jumpLink(item.link)">
                                        <div class="recommended-author-info">
                                            <div class="recommended-author-img-box">
                                                <img :src="item.avatarURL" :alt="item.name" class="recommended-author-img">
                                            </div>
                                            <div>
                                                <div class="recommended-author-name">{{ item.name }}</div>
                                                <div class="recommended-author-desc">{{ item.desc }}</div>
                                            </div>
                                        </div>
                                        <el-button type="primary" round size="small">关注</el-button>
                                    </div>
                                </el-card>
                            </div>
                        </el-affix>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-main>
</template>

<script setup>
import SearchLogo from '@/views/blog/blogPage/components/SearchLogo.vue'
import BlogItem from '@/views/blog/blogPage/components/BlogItem.vue'
import { Search, ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const isOpen = ref(false)

const searchValue = ref()

const dailyRecommendation = ref({
    title: "咒术回战 第二季",
    imgURL: new URL("@/assets/images/zshz.png@330w_442h.webp", import.meta.url).href,
    content: "这是无敌的两人再也回不去的青春。2018年6月，虎杖悠仁被两面宿傩附身。2017年12月，乙骨忧太解除祈本里香的诅咒。再往前追溯2006年春——五条悟和夏油杰还在高专时期。成为咒术师大显身手，所向无敌的两人，接到了拥有不死术式的咒术界关键，“天元”的委托。委托共有两个。那就是对天元的适合者，身为“星浆体”的少女天内理子进行“护卫”和“抹杀”。为了咒术界的存续，两人前往执行护卫任务，却遇到一个自称为伏黑的“术师杀手”前来暗杀星浆体。这是后来分别被称为最强咒术师和最恶诅咒师的五条和夏油，分道扬镳之前的往事。"
})

const blogItems = ref([{
    title: "【C++历险记】国庆专辑---探索多态迷宫的代码之旅",
    imgURL: new URL("@/assets/images/blogItemG.png", import.meta.url).href,
    desc: "文篇讨论了C++中的多态性概念，包括其定义、实现和基本原理。涵盖了虚函数、重写、虚函数表和动态绑定等主题。本文还探讨了虚函数表与继承之间的关系，包括单一继承和多重继承以及菱形继承。此外，解释了抽象类和接口及实现继承的概念。。",
    likeNum: 55,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-10-02",
    id: 1
}, {
    title: "解决谷歌浏览器无法自动播放HTML文件的声音和视频问题的方法",
    imgURL: new URL("@/assets/images/blogItemM.png", import.meta.url).href,
    desc: "解决谷歌浏览器无法自动播放视频和声音的方法",
    likeNum: 2,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-03-15",
    id: 2
}, {
    title: "uniapp实现app检查更新与升级-uni-upgrade-center详解",
    imgURL: new URL("@/assets/images/blogItemD.png", import.meta.url).href,
    desc: "uniapp官方开发的App版本更新的插件，基于unicloud的后端服务因为是开源的，通过修改源码可以实现请求java等其他后端服务，后续的源码解析章节会介绍升级中心分为两个部分：前台检测更新：uni-admin已内置 升级中心，直接使用即可。并且云函数废弃，使用云函数。uni-upgrade-center Admin管理后台(uni-admin 1.9.3+ 已内置，此插件不再维护)：请前往Gitee下载tag v0.5.1版本使用：请前往Gitee下载tag v0.4.2版本使用。",
    likeNum: 2,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-02-15",
    id: 3
}, {
    title: "【C++杂货铺】set 和 map 使用总结",
    imgURL: new URL("@/assets/images/headImage.png", import.meta.url).href,
    desc: "本篇文章介绍了 set 与 map 的使用",
    likeNum: 102,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-10-02",
    id: 4
}, {
    title: "vue3的基本使用(超详细)",
    imgURL: new URL("@/assets/images/blogItemN.png", import.meta.url).href,
    desc: "2020年9月18日，vue3发布3.0版本，代号大海贼时代来临，One Piece特点：无需构建步骤，渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jamstack / 静态站点生成 (SSG)开发桌面端、移动端、WebGL，甚至是命令行终端中的界面什么是hook函数： 本质是一个函数，把setup函数中使用的Composition API进行了封装类似于vue2.x中的 mixin。......",
    likeNum: 423,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2022-11-04",
    id: 5
}, {
    title: "vscode配置C/C++环境（超详细保姆级教学）",
    imgURL: new URL("@/assets/images/blogItemF.png", import.meta.url).href,
    desc: "大一上学期被学长安利了vscode，但是下载安装后不会配置，自己连查带问搞了七八个小时终于配置好了。后面身边很多同学也不会配，都来找我帮忙配，加上之前自己摸索着配的时候感觉网上没有详细又靠谱的教程，所以决定把配置的过程记录一下供大家参考，希望可以帮到跟我一样想用却不会配置vscode的同学们。",
    likeNum: 254,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-01-22",
    id: 6
}, {
    title: "【C++】：类和对象（2）",
    imgURL: new URL("@/assets/images/blogItemB.png", import.meta.url).href,
    desc: "C++类和对象第二讲，包含构造函数、析构函数、拷贝构造的详细介绍，以及代码演示，并且还包含多种运算符重载的详细介绍。",
    likeNum: 56,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-10-09",
    id: 7
}, {
    title: "常用的几种布局方式---Flex 布局(垂直居中展示）",
    imgURL: new URL("@/assets/images/blogItemT.png", import.meta.url).href,
    desc: "常用的几种布局方式---Flex 布局(垂直居中展示）",
    likeNum: 1,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-02-14",
    id: 8
}, {
    title: "Linux下安装和使用MySQL的详细教程",
    imgURL: new URL("@/assets/images/blogItemH.png", import.meta.url).href,
    desc: "Linux 下 MySQL 安装指令步骤 1：安装 MySQL步骤 2：启动 MySQL 服务步骤 3：设置 MySQL 根用户密码步骤 4：登录到 MySQLLinux 下 MySQL 使用指令其它常用指令1、利用指令修改mysql数据表中某个字段的长度2、查看mysql数据表结构3、给mysql数据表添加一个新的字段4、删除数据表的数据",
    likeNum: 59,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-09-13",
    id: 9
}, {
    title: "(完整版)HTML5常用标签大全",
    imgURL: "",
    desc: "(完整版)HTML5常用标签大全",
    likeNum: 13,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2022-10-19",
    id: 10
}, {
    title: "Linux系统安装部署MySQL完整教程（图文详解））",
    imgURL: new URL("@/assets/images/blogItemU.png", import.meta.url).href,
    desc: "最近网上翻阅了大量关于Linux安装部署MySQL的教程，在自己部署的时候总是存在一些小问题，例如：版本冲突，配置失败和启动失败等等，功夫不负有心人，最后还是安装部署成功了，所以本篇博客记录了我是如何完整一步步的安装部署MySQL起来的，每一行代码都进行了严格的测试，其中的坑博主已经替大家全部踩完了，完整详细的步骤都在这篇博客中了，特此分享！",
    likeNum: 26,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-08-24",
    id: 11
}, {
    title: "ECharts--中国地图（无敌详细）",
    imgURL: new URL("@/assets/images/blogItemM.png", import.meta.url).href,
    desc: "使用Echarts绘制中国地图，其中地图点信息由JSON文件编写，前端html直接从JSON文件中读取地区数据，渲染到前端即可。详细介绍用到的各个功能！代码直接复制运行即可！",
    likeNum: 31,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-03-12",
    id: 12
}, {
    title: "【优雅的参数验证@Validated】@Validated参数校验的使用及注解详解——你还在用if做条件验证？",
    imgURL: new URL("@/assets/images/blogItemV.png", import.meta.url).href,
    desc: "你还在用if做条件验证？【优雅的参数验证@Validated】--@Validated参数校验的使用及注解详解",
    likeNum: 31,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2022-11-15",
    id: 13
}, {
    title: "C语言中的函数返回值、return用法、return 0详解",
    imgURL: "",
    desc: "定义：函数的返回值是指函数被调用之后，执行函数体中的代码所得到的结果，这个结果通过return语句返回。1) return 语句的一般形式为：return 表达式;return (表达式); 为了简明，（）一般不写。例如：return 0return 0；表示程序正常退出，即当return语句提供了一个值时，这个值就成为函数的返回值。return 1；表示程序异常退出，返回主调函数来处理，继续往下执行。",
    likeNum: 23,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2022-10-17",
    id: 14
}, {
    title: "Spring Boot项目中的Controller、Service、Mapper和Entity层的作用与联系",
    imgURL: new URL("@/assets/images/blogItemL.png", import.meta.url).href,
    desc: "在Spring Boot项目中，常见的四个层次是Controller层、Service层、Mapper层和Entity层。它们各自承担着不同的职责，但彼此之间存在着紧密的联系。本文将详细介绍这四个层次的作用与联系，并提供相关实例来说明它们之间的关系。",
    likeNum: 8,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-06-22",
    id: 15
}
])

const categoryItems = ref([
    { name: "前端", id: 1 },
    { name: "后端", id: 2 },
    { name: "数据库", id: 3 },
    { name: "大数据", id: 4 },
    { name: "JavaScript", id: 5 },
    { name: "HTML", id: 6 },
    { name: "CSS", id: 7 },
    { name: "人工智能", id: 8 },
    { name: "移动开发", id: 9 },
    { name: "Java", id: 10 },
    { name: "Python", id: 11 },
    { name: "操作系统", id: 12 },
    { name: "小程序", id: 13 },
    { name: "服务器", id: 14 },
    { name: "硬件开发", id: 15 },
    { name: "嵌入式", id: 16 },
    { name: "网络与通信", id: 17 },
    { name: "游戏开发", id: 18 },
    { name: "开发工具", id: 19 },
    { name: "占位", id: 20 },
    { name: "占位", id: 21 },
    { name: "占位", id: 22 },
    { name: "占位", id: 23 },
    { name: "占位", id: 24 },
    { name: "占位", id: 25 },
    { name: "占位", id: 26 },
    { name: "占位", id: 27 },
    { name: "占位", id: 28 },
    { name: "占位", id: 29 },
    { name: "占位", id: 30 },
    { name: "占位", id: 31 },
    { name: "占位", id: 32 },
    { name: "占位", id: 33 },

])

const recommendedAuthors = ref([
    { avatarURL: new URL("@/assets/images/wy.png", import.meta.url).href, name: "wHitE_", desc: "java是世界上最好的语言.js", id: 1 },
    { avatarURL: new URL("@/assets/images/olish.jpg", import.meta.url).href, name: "olish", desc: "夜之城没有活着的传奇", id: 2 },
    { avatarURL: new URL("@/assets/images/cachron.jpg", import.meta.url).href, name: "cachron", desc: "内心孤独是一辈子的事", id: 3 },
    { avatarURL: new URL("@/assets/images/xigong_.jpg", import.meta.url).href, name: "xigong_", desc: "这是一个很丰富的简介!", id: 4 },
    { avatarURL: new URL("@/assets/images/magic_jack.jpg", import.meta.url).href, name: "magic_jack", desc: "目标", id: 5 },
])

const load = () => {
    blogItems.value.push.apply(blogItems.value, blogItems.value)
}

const rightCard = ref()
const fixHeight = ref()
onMounted(() => {
    if ((rightCard.value.offsetHeight + 20) >= window.innerHeight)
        fixHeight.value = -((rightCard.value.offsetHeight + 20) - window.innerHeight)
    else
        fixHeight.value = 0
})
const handleOPEN = () => {
    window.open("https://www.bilibili.com/bangumi/media/md20310848", '_blank');
}
</script>

<style lang="scss" scoped>
.main {
    overflow: visible;
}

.search-box {
    display: flex;

    ::v-deep .el-input__wrapper {
        border-radius: 25px 0 0 25px;
    }
}

.search-button {
    border-radius: 0 25px 25px 0;
    padding: 20px;
}

.categoryBar-box {
    height: 100px;
}

.categoryBar {
    z-index: 999;
    margin-top: 50px;
    background-color: #FFFFFF;
    padding: 25px;
    height: 20px;
    min-height: 20px;
    line-height: 1.5;
    overflow-y: hidden;
    transition: .4s;
    position: relative;

    ul {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 10px;

        li {
            margin: 0 30px 20px 0;
        }
    }
}

.categoryBar:hover {
    padding-bottom: 0;
    border-radius: 0 0 5px 5px;
    height: auto;
    transition: .4s;
}

.categoryItem {
    cursor: pointer;
    color: #606266;
}

.categoryItem:hover {
    color: #000000;
}

.arrowDown {
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 30px;
    height: 10px;
    line-height: 10px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    background-color: #f2f3f5;
}

.arrowUp {
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 30px;
    height: 10px;
    line-height: 10px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    background-color: #f2f3f5;
}

.side-card {
    margin-bottom: 20px;
}

.decoration-img-box {
    height: 460px;
    width: 100%;

    .decoration-img {
        width: 100%;
        display: block;
    }
}

.decoration {
    padding: 15px;

    h3 {
        margin-bottom: 20px;
    }
}

.decoration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.decoration-content {
    margin-top: 15px;
    line-height: 12px;
    font-size: 12px;
    color: #606266;

}

.viewBtn {
    height: 100%;
}

.card-header {
    font-size: 18px;
}

.recommended-author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    cursor: pointer;
}

.recommended-author-info {
    display: flex;
}

.recommended-author:nth-child(1) {
    margin-top: 0;
}

.recommended-author-img-box {
    width: 45px;
    height: 45px;

    .recommended-author-img {
        width: 45px;
        height: 45px;
        margin-right: 10px;
        border-radius: 50%;
    }
}

.recommended-author-name {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.recommended-author-desc {
    font-size: 12px;
    color: #606266;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
</style>